<template>
	<view class="mainCss">
		<view class="titleBox">
			<view class="titleLeft">
				<img src="../../static/title/back.png" class="titleBack" @click="goBack">
			</view>
			<view class="titleText">
				<text>加盟</text>
			</view>
			<view class="titleRight">

			</view>
		</view>
		<view class="selectBox">
			<view class="selectBox1">
				<view class="selectIconBox">
					<img src="../../static/home/select.png" class="selectIcon">
				</view>
				<input type="text" class="selectInput" v-model="selectInfo" placeholder="请输入搜索内容"
					placeholder-style="color: #DFDFDF;">
			</view>
			<view class="">
				<button class="selectButton">搜索</button>
			</view>
		</view>
		<view class="bgBox">
			<view class="overBox">
				<view class="overflowBox">
					<view class="changeBox" :style="{width: typeList.length * 200 + 'rpx'}">
						<view class="type" :class="[type == index?'type1':'type']" v-for="(item, index) in typeList"
							:key="index" @click="tapInfo(index)">
							<text>{{item.typeName}}</text>
							<span class="border_bom" v-show="type == index"></span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bodyBox">
			<view class="joinBox">
				<view class="forList" v-for="(item, index) in joinList" :key="index">
					<view class="infoBox" @click="details">
						<view class="infoTextBox">
							<img src="../../static/home/info.jpg" class="infoImg">
							<span style="display: flex;flex-wrap: wrap; margin-left: 20rpx;">
								<text style="width: 100%; margin: 5rpx;">{{item.title}}</text>
								<text
									style="width: 100%; margin: 5rpx; font-size: 12px; color: #999999;">{{item.area}}</text>
								<text style="width: 100%; margin: 5rpx; color: #FF0000; font-size: 12px;">
									{{item.money}} 万元</text>
							</span>
							<span
								style="display: flex; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 50rpx;">
								<text
									style="width: 100%; color: #FF0000; font-size: 18px; text-align: right;">{{item.price}}万元</text>
								<text style="color: #999999; font-size: 12px;">加盟费</text>
								<text></text>
							</span>
						</view>
						<view class="infoUserBox">
							<span style="display: flex; align-items: center;">
								<img src="../../static/home/touxiang.png" class="userHead">
								<text style="margin-left: 15rpx; color: #999999; font-size: 12px;">发布人</text>
							</span>
							<img src="../../static/lease/more.png" class="moreIcon">
						</view>
					</view>
				</view>
			</view>
		</view>
		<image src="../../static/join/settled.png" class="ball"
			:style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')"
			@touchstart="drag_start" @touchmove.prevent="drag_hmove" mode="aspectFit">
		</image>
	</view>
</template>

<script>
	export default {
		//悬浮球绝对位置百分比，页面刷新会回到这个位置
		props: {
			x: {
				type: Number,
				default: 80
			},
			y: {
				type: Number,
				default: 50
			},
			image: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				type: 0,
				typeList: [{
					typeName: '生活服务加盟'
				}, {
					typeName: '餐饮加盟'
				}, {
					typeName: '汽车服务加盟'
				}, {
					typeName: '网络服务加盟'
				}, {
					typeName: '美容保健加盟'
				}, {
					typeName: '服装鞋包加盟'
				}, {
					typeName: '网络代理加盟'
				}, {
					typeName: '教育/母婴'
				}, {
					typeName: '建材加盟'
				}, {
					typeName: '礼品加盟'
				}],
				joinList: [{
					title: '测试名称',
					area: '测试区域',
					money: 2,
					price: 1,
					info: '测试简介',
				}, {
					title: '测试名称',
					area: '测试区域',
					money: 2,
					price: 1,
					info: '测试简介',
				}, {
					title: '测试名称',
					area: '测试区域',
					money: 2,
					price: 1,
					info: '测试简介',
				}],
				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '',
			}
		},
		onShow() {
			//获取系统分辨率
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
		},
		onLoad(src) {
			this.type = src.type
		},
		methods: {
			// 返回
			goBack() {
				uni.navigateBack(0)
			},
			// 获取当前的下标
			tapInfo(index) {
				this.type = index
			},
			// 悬浮球
			drag_start(event) {
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			//判断防止悬浮球被拖出页面
			drag_hmove(event) {
				let tag = event.touches;
				if (tag[0].clientX < 20) {
					tag[0].clientX = 40
				}
				if (tag[0].clientY < 20) {
					tag[0].clientY = 40
				}
				if (tag[0].clientX > this.windowWidth - 20) {
					tag[0].clientX = this.windowWidth - 30
				}
				if (tag[0].clientY > this.windowHeight - 20) {
					tag[0].clientY = this.windowHeight - 30
				}
				this.moveX = tag[0].clientX - this.start[0];
				this.moveY = tag[0].clientY - this.start[1];
			},
		}
	}
</script>

<style>
	@import '../../css/allType.css';
</style>
